<template>
  <div class="container-fluid">
    <!-- 顶部导航栏 -->
    <header class="col-md-12 bg-primary text-white p-3">
      <div class="row justify-content-between align-items-center">
        <div class="col-md-6">
          <h1>停车场管理系统</h1>
        </div>
        <div class="col-md-6 text-right">
          <div class="d-flex justify-content-end align-items-center">
            <span class="mr-4">{{ username }}</span>
            <router-link to="/" class="btn btn-light mr-2">返回首页</router-link>
            <button @click="logout" class="btn btn-light">退出</button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="col-md-12 mt-4">
      <div class="card">
        <div class="card-header bg-secondary text-white">
          <div class="row align-items-center">
            <div class="col-md-6">
              <h2>IC卡管理</h2>
            </div>
            <div class="col-md-6 d-flex justify-content-end">
              <button @click="addCard" class="btn btn-primary">添加IC卡</button>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="mb-4">
            <div class="row">
              <div class="col-md-6">
                <button @click="deleteSelectedCards" class="btn btn-danger">删除选中</button>
              </div>
              <div class="col-md-6 d-flex justify-content-end">
                <input type="text" placeholder="搜索IC卡" class="form-control" style="width: 200px;">
              </div>
            </div>
          </div>
          
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>
                  <input type="checkbox" v-model="selectAll" @change="selectAllCards">
                </th>
                <th>卡号</th>
                <th>类型</th>
                <th>状态</th>
                <th>所属用户</th>
                <th>有效期</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="card in cardList" :key="card.id">
                <td>
                  <input type="checkbox" v-model="selectedCards" :value="card.id">
                </td>
                <td>{{ card.cardNumber }}</td>
                <td>{{ card.type === 0 ? '临时卡' : '月卡' }}</td>
                <td>
                  <span :class="{
                    'text-success': card.status === 0,
                    'text-danger': card.status === 1
                  }">
                    {{ card.status === 0 ? '正常' : '已挂失' }}
                  </span>
                </td>
                <td>{{ card.userName || '未分配' }}</td>
                <td>{{ card.expiryDate }}</td>
                <td>
                  <button @click="editCard(card.id)" class="btn btn-info btn-sm mr-2">编辑</button>
                  <button @click="deleteCard(card.id)" class="btn btn-danger btn-sm">删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'CardManageView',
  data() {
    return {
      username: '',
      cardList: [],
      selectedCards: []
    }
  },
  computed: {
    selectAll: {
      get() {
        return this.cardList.length > 0 && this.cardList.every(card => this.selectedCards.includes(card.id))
      },
      set(value) {
        if (value) {
          this.selectedCards = this.cardList.map(card => card.id)
        } else {
          this.selectedCards = []
        }
      }
    }
  },
  mounted() {
    this.username = localStorage.getItem('username') || '管理员'
    this.loadCardList()
  },
  methods: {
    logout() {
      localStorage.removeItem('isLoggedIn')
      localStorage.removeItem('username')
      this.$router.push('/login')
    },
    
    selectAllCards() {
      // 全选/取消全选功能已在computed中实现
    },
    
    deleteSelectedCards() {
      if (this.selectedCards.length === 0) {
        alert('请先选择要删除的IC卡')
        return
      }
      
      if (confirm(`确定要删除选中的 ${this.selectedCards.length} 张IC卡吗？`)) {
        this.cardList = this.cardList.filter(card => !this.selectedCards.includes(card.id))
        this.selectedCards = [] // 清空选中状态
        alert('删除成功')
      }
    },
    
    loadCardList() {
      // 模拟加载IC卡列表
      this.cardList = [
        { id: 1, cardNumber: 'IC0001', type: 1, status: 0, userName: '张三', expiryDate: '2025-12-31' },
        { id: 2, cardNumber: 'IC0002', type: 1, status: 0, userName: '李四', expiryDate: '2025-10-31' },
        { id: 3, cardNumber: 'IC0003', type: 0, status: 0, userName: '', expiryDate: '2025-06-30' },
        { id: 4, cardNumber: 'IC0004', type: 1, status: 1, userName: '王五', expiryDate: '2025-08-31' }
      ]
    },
    
    addCard() {
      // 添加IC卡逻辑
      alert('添加IC卡功能待实现')
    },
    
    editCard(id) {
      // 编辑IC卡逻辑
      alert(`编辑IC卡 ${id}`)
    },
    

    
    deleteCard(id) {
      // 删除IC卡逻辑
      if (confirm('确定要删除这个IC卡吗？')) {
        this.cardList = this.cardList.filter(card => card.id !== id)
        alert('删除成功')
      }
    }
  }
}
</script>

<style>
/* 这里可以添加组件特定的样式 */
</style>